<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=srZpszfdgVmFVNM8mS0asCKXTKW88kGa&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
    axios.post("/statistics/personnelDistribution.do").then((response) => {
        if (response.data.flag) {
            var people = [
            ];
            var geoCoordMap = {

            };
            people = response.data.data[0];
            let nameMap = response.data.data[1];

            //创建一个map集合
            var dataMap = {
                props: {},
                //增
                Set: function (key, value) {
                    this.props[key] = value
                },
                //查
                Get: function (key) {
                    return this.props[key]
                },
                //改
                Contains: function (key) {
                    return this.props[key] == null ? false : true
                },
                //删
                Remove: function (key) {
                    delete this.props[key]
                }
            }

            var arr = new Array()
            //把传过来的list集合读出来获得map集合
            for (let key in nameMap) {
                let element = nameMap[key];
                //把map集合通过key读出数据，并从新封装到map集合中
                for (let key1 in element) {
                    let element1 = element[key1];
                    dataMap.Set(key1, element1);
                }
            }
            //把map集合中的数据赋值到geoCoordMap
            geoCoordMap = dataMap.props;
            //待解决---------------------------------------------------
            // isLoading:true;
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;

            var convertData = function (people) {
                var res = [];
                for (var i = 0; i < people.length; i++) {
                    var geoCoord = geoCoordMap[people[i].name];
                    if (geoCoord) {
                        res.push({
                            name: people[i].name,
                            value: geoCoord.concat(people[i].value)
                        });
                    }
                }
                return res;
            };

            option = {
                title: {
                    text: '黑马健康会员分布情况',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                bmap: {
                    center: [104.114129, 37.550339],
                    zoom: 6,
                    roam: true,
                },
                series: [
                    //获取全部的人员分布情况
                    {
                        name: '会员分布',
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: convertData(people),
                        symbolSize: function (val) {
                            return val[2] * 5;
                        },
                        encode: {
                            value: 2
                        },
                        itemStyle: {
                            color: 'purple'
                        },
                    },
                    {
                        //获取最大数的几个值
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: convertData(people.sort(function (a, b) {
                            return b.value - a.value;
                        }).slice(0, 5)),
                        symbolSize: function (val) {
                            return val[2] * 5;
                        },
                        encode: {
                            value: 2
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        itemStyle: {
                            color: 'blue',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        },
                        zlevel: 1
                    }
                ]
            }
            if (option && typeof option === "object") {
                myChart.setOption(option, true);// 获取百度地图实例，使用百度地图自带的控件
                var bmap = myChart.getModel().getComponent('bmap').getBMap();
                bmap.addControl(new BMap.MapTypeControl());//调用百度的方法，使用bmap对象
            }
        }
    })
</script>
</body>
</html>